<script lang="ts" setup>
import type { IPerson } from "@/myTypes"
import { reactive, ref } from "vue";
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { addPersonApi } from "@/api/person";
import { roles } from "./PersonList"
import eventBus from "@/utils/eventBus";

// 声明事件
interface IEmits {
  (e: "ok"): void
}
const emit = defineEmits<IEmits>()

// 声明属性
const person: IPerson = reactive({});

// 定义表达组件的对象
const ruleFormRef = ref<FormInstance>();

// 菜单权限数据：
const data = [
  {
    id: "1",
    label: '首页'
  },
  {
    id: "2",
    label: '轮播图管理',
    children: [
      {
        id: "2-1",
        label: '轮播图列表',
        children: [
          {
            id: "2-1-C",
            label: "添加"
          },
          {
              id:"2-1-R",
              label:"查看"
          },
          {
            id: "2-1-U",
            label: "修改"
          },
          {
            id: "2-1-D",
            label: "删除"
          }
        ]
      }
    ],
  },
  {
    id: "3",
    label: '操作人员管理',
    children: [
      {
        id: "3-1",
        label: '操作人员列表',
      }
    ],
  },
  {
    id: "4",
    label: '产品管理',
    children: [
      {
        id: "4-1",
        label: '秒杀列表',
      },
      {
        id: "4-2",
        label: '推荐列表',
      },
      {
        id: "4-3",
        label: '筛选列表',
      },
      {
        id: "4-4",
        label: '产品列表',
      }
    ],
  },
  {
    id: "5",
    label: '数据统计',
    children: [
      {
        id: "5-1",
        label: 'K线图',
      },
      {
        id: "5-2",
        label: '柱状图',
      }
    ],
  }
]

// 当前选中的菜单权限数据：
let checkedKeys = [];

const defaultProps = {
  children: 'children',
  label: 'label',
}

// 
const validatorPass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('Please input 密码'))
  } else {
    // if (!ruleFormRef.value) return;
    // ruleFormRef.value.validateField('password', () => null)      
    if (!(/^[a-z]\w{5}$/.test(value))) {
      callback(new Error('密码格式不正确'))
    }
  }
  callback()
}

// 表达内容的验证：
const rules = reactive<FormRules>({
  adminname: [
    { required: true, message: 'Please input 用户名', trigger: 'blur' }
  ],
  password: [{ validator: validatorPass, trigger: 'blur' }],
  role: [{ required: true, message: 'Please 选择角色', trigger: 'blur' }],
})

// 添加操作人员

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;

  formEl.validate((valid) => {
    if (valid) {
      person.checkedKeys = checkedKeys;
      addPersonApi(person)
        .then((res: any) => {
          if (res.data.code == "200") {
            ElMessage({
              type: "success",
              message: "添加成功！"
            })
            // emit("ok");
            // eventBus.publish(事件名);
            eventBus.publish("ok");
          }
        })
    } else {
      console.log('error submit!')
      return false
    }
  })

}

// 权限
const checkFn = (arg1, arg2) => {
  // console.log("arg1",arg1);//第一个参数是：当前点击的。
  // console.log("arg2",arg2);//第二个参数是个对象，分别有属性： checkedKeys,checkedNodes,halfCheckedKeys,halfCheckedNodes
  checkedKeys = arg2.checkedKeys.concat(arg2.halfCheckedKeys);
}

</script>

<template>
  <el-form ref="ruleFormRef" :model="person" :rules="rules" status-icon label-width="120px" class="demo-ruleForm">
    <el-form-item label="账号名" prop="adminname">
      <el-input v-model="person.adminname" autocomplete="off" />
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input v-model="person.password" autocomplete="off" placeholder="密码格式：共6位，由大小写字母，数字，下划线构成，以小写字母开头" />
    </el-form-item>

    <el-form-item label="角色" prop="role">
      <el-select v-model="person.role">
        <el-option v-for="item in roles" :key="item.value" v-bind="item" />
      </el-select>
    </el-form-item>

    <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2]" :default-checked-keys="[1]"
      :props="defaultProps" @check="checkFn" />

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">添加</el-button>
      <el-button>Reset</el-button>
    </el-form-item>

  </el-form>
</template>

<style lang="css" scoped></style>
